// 图片或元素入场
.slit-in-horizontal {
  -webkit-animation: slit-in-horizontal 0.45s ease-out both;
  animation: slit-in-horizontal 0.45s ease-out both;
}
.swirl-in-bck {
  animation: swirl-in-bck 0.65s ease-out both;
}
.slide-in-blurred-left {
  -webkit-animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1)
    both;
  animation: slide-in-blurred-left 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
}
.bounce-in-top {
  animation: bounce-in-top 1.1s both;
}
.roll-in-top {
  animation: roll-in-top 0.6s ease-out both;
}
.puff-in-center {
  animation: puff-in-center 0.7s cubic-bezier(0.47, 0, 0.745, 0.715) both;
}
// 图片或元素离场
.scale-out-vertical {
  animation: scale-out-vertical 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.rotate-out-diag-2 {
  animation: rotate-out-diag-2 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.slit-out-horizontal {
  animation: slit-out-horizontal 0.5s ease-in both;
}
.slide-out-blurred-top {
  animation: slide-out-blurred-top 0.45s cubic-bezier(0.755, 0.05, 0.855, 0.06)
    both;
}
.roll-out-right {
  animation: roll-out-right 0.6s ease-in both;
}
.fade-out {
  animation: fade-out 1s ease-out both;
}
// 文字入场
.text-focus-in {
  animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.focus-in-contract {
  animation: focus-in-contract 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.focus-in-expand {
  animation: focus-in-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.tracking-in-expand {
  animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
.tracking-in-contract {
  animation: tracking-in-contract 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) both;
}
// 文字离场
.tracking-out-contract {
  animation: tracking-out-contract 0.7s cubic-bezier(0.55, 0.085, 0.68, 0.53)
    both;
}
.tracking-out-expand {
  animation: tracking-out-expand 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.tracking-out-expand-fwd-top {
  animation: tracking-out-expand-fwd-top 0.8s
    cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.text-blur-out {
  animation: text-blur-out 1.2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.blur-out-expand {
  animation: blur-out-expand 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.blur-out-contract {
  animation: blur-out-contract 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
// 文字
@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes focus-in-expand {
  0% {
    letter-spacing: -0.5em;
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-contract {
  0% {
    letter-spacing: 1em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    letter-spacing: normal;
    opacity: 1;
  }
}
@keyframes tracking-out-contract {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
}
@keyframes tracking-out-expand {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    opacity: 0;
  }
}

@keyframes tracking-out-expand-fwd-top {
  0% {
    transform: translateZ(0) translateY(0);
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  100% {
    letter-spacing: 1em;
    transform: translateZ(300px) translateY(-200px);
    opacity: 0;
  }
}
@keyframes text-blur-out {
  0% {
    filter: blur(0.01);
  }
  100% {
    filter: blur(12px) opacity(0);
  }
}
@keyframes blur-out-expand {
  0% {
    filter: blur(0.01);
  }
  100% {
    letter-spacing: 1em;
    filter: blur(12px) opacity(0);
  }
}
@keyframes blur-out-contract {
  0% {
    filter: blur(0.01);
  }
  100% {
    letter-spacing: -0.5em;
    filter: blur(12px) opacity(0);
  }
}
// 离场动画
@keyframes slide-out-blurred-top {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
    transform-origin: 50% 0;
    filter: blur(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scaleY(2) scaleX(0.2);
    transform-origin: 50% 0;
    filter: blur(40px);
    opacity: 0;
  }
}
@keyframes scale-out-vertical {
  0% {
    transform: scaleY(1);
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 1;
  }
}
@keyframes rotate-out-diag-2 {
  0% {
    transform: rotate3d(-1, 1, 0, 360deg);
    opacity: 1;
  }
  100% {
    transform: rotate3d(-1, 1, 0, 0deg);
    opacity: 0;
  }
}
@keyframes slit-out-horizontal {
  0% {
    transform: translateZ(0) rotateX(0);
    opacity: 1;
  }
  54% {
    transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
}
@keyframes roll-out-right {
  0% {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateX(1000px) rotate(540deg);
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

// 入场动画
@keyframes puff-in-center {
  0% {
    transform: scale(2);
    filter: blur(4px);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}
@keyframes roll-in-top {
  0% {
    transform: translateY(-800px) rotate(-540deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes bounce-in-top {
  0% {
    transform: translateY(-500px);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    transform: translateY(0);
    animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    transform: translateY(-65px);
    animation-timing-function: ease-in;
  }
  72% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  81% {
    transform: translateY(-28px);
    animation-timing-function: ease-in;
  }
  90% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  95% {
    transform: translateY(-8px);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
}
@keyframes slide-in-blurred-left {
  0% {
    transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
    transform-origin: 100% 50%;
    filter: blur(40px);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scaleY(1) scaleX(1);
    transform-origin: 50% 50%;
    filter: blur(0);
    opacity: 1;
  }
}
@-webkit-keyframes slit-in-horizontal {
  0% {
    -webkit-transform: translateZ(-800px) rotateX(90deg);
    transform: translateZ(-800px) rotateX(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateZ(-160px) rotateX(87deg);
    transform: translateZ(-160px) rotateX(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateZ(0) rotateX(0);
    transform: translateZ(0) rotateX(0);
  }
}
@keyframes swirl-in-bck {
  0% {
    transform: rotate(540deg) scale(5);
    opacity: 0;
  }
  100% {
    transform: rotate(0) scale(1);
    opacity: 1;
  }
}
